<!--
 * @Author: SongKaiWang
 * @Date: 2023-11-23 10:15:30
 * @LastEditTime: 2023-11-29 16:18:59
-->

<template>
  <div>
    <el-dialog
      width="1700px"
      title="订单问题审批 "
      destroy-on-close
      append-to-body
      v-if="show"
      :visible.sync="show"
      :before-close="cancel"
    >
      <div class="apply-main">
        <div class="baseInfor">
          <el-row style="margin-bottom: 20px">
            <el-col :span="4"> {{ $t('订单号') }}:{{ FormData.orderNo ? FormData.orderNo : '无' }} </el-col>
            <el-col :span="2" :offset="1"> {{ $t('营业额') }}:{{ FormData.turnover }} </el-col>
            <el-col :span="2" :offset="1"> {{ $t('手续费') }}:{{ FormData.commission }} </el-col>
          </el-row>
          <el-row>
            <el-col :span="4"> {{ $t('包裹号') }}:{{ FormData.packageNo }} </el-col>
            <el-col :span="2" :offset="1"> {{ $t('运费') }}:{{ (+FormData.deliveryFee).toFixed() }} </el-col>
            <el-col :span="2" :offset="1"> {{ $t('捆包') }}:{{ (+FormData.bundleFee).toFixed() }} </el-col>
          </el-row>
        </div>
        <el-divider></el-divider>
        <div style="display: flex; justify-content: space-between">
          <el-card style="width: 24%">
            <div>问题sku：</div>
            <el-table
              :data="FormData.processingMethod == 4 ? FormData.orderApplySkuList : FormData.orderSkuApplyList"
              style="width: 100%"
              height="250"
            >
              <el-table-column align="center" prop="skuNo" :label="$t('sku')" width="110"> </el-table-column>
              <el-table-column align="center" prop="imgUrl" :label="$t('图片')">
                <template slot-scope="scope">
                  <el-image style="width: 30px; height: 30px" :src="scope.row.imgUrl" fit="fit"></el-image>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="num" :label="$t('数量')"> </el-table-column>

              <el-table-column align="center" prop="applyPrice" :label="$t('申请价格')">
                <template slot-scope="{ row }">
                  {{ row.applyPrice ? (+row.applyPrice).toFixed() : '' }}
                </template>
              </el-table-column>
            </el-table>
          </el-card>
          <el-card style="width: 24%">
            <el-row style="margin-bottom: 4px">
              {{ $t('卖家发起问题原因，及希望解决方式') }}:<span
                v-if="FormData.wantProcessingMethod"
                style="font-weight: bold; color: red"
              >
                {{
                  FormData.wantProcessingMethod == 1
                    ? '换货'
                    : FormData.wantProcessingMethod == 2
                    ? '退款'
                    : FormData.wantProcessingMethod == 3
                    ? '补发'
                    : FormData.wantProcessingMethod == 4
                    ? '买家拒收'
                    : ''
                }}
              </span>
            </el-row>

            <el-row>
              <el-input type="textarea" v-model="FormData.reason" :rows="11" disabled></el-input>
            </el-row>
          </el-card>
          <el-card style="height: 100%; width: 24%">
            <el-row style="margin-bottom: 4px">
              {{ $t('贴图') }}
            </el-row>
            <el-row style="overflow-y: scroll; height: 250px" v-if="FormData.imgUrl">
              <el-image
                style="width: 100px; height: 100px; margin: 0px 8px 8px 0"
                :src="item"
                fit="fit"
                :preview-src-list="FormData.imgUrl.split(',')"
                v-for="(item, index) in FormData.imgUrl.split(',')"
                :key="index + 'j'"
              ></el-image>
            </el-row>
          </el-card>
          <el-card style="width: 24%">
            <el-row style="margin-bottom: 4px">
              {{ $t('订单号') }}
            </el-row>
            <el-row
              v-if="FormData.packageOtherOrderNoList && FormData.packageOtherOrderNoList.length > 0"
              style="overflow-y: scroll; height: 250px"
            >
              <div
                v-for="(item, index) in FormData.packageOtherOrderNoList"
                :key="index + 'k'"
                @click="orderInfor(item)"
                style="word-break: normal; overflow: hidden"
              >
                {{ item }}
              </div>
            </el-row>
            <el-row
              v-else-if="FormData.orderNoList && FormData.orderNoList.length > 0"
              style="overflow-y: scroll; height: 250px"
            >
              <div
                v-for="(item, index) in FormData.orderNoList"
                :key="index + 'k'"
                @click="orderInfor(item)"
                style="word-break: normal; overflow: hidden"
              >
                {{ item }}
              </div>
            </el-row>
            <el-row v-else>
              <el-empty :image-size="120"></el-empty>
            </el-row>
          </el-card>
        </div>
        <el-divider></el-divider>
        <!-- 问题处理方式 -->
        <div class="processMode" v-if="FormData.status != 4">
          <!-- 要求前端初始化多种数据，因此单独写第四种处理方式 -->
          <el-card class="processModeLeft" v-if="FormData.processingMethod !== 4">
            <div style="display: flex; justify-content: space-between">
              <div>
                <strong>处理方式：</strong>
                <el-radio-group size="mini" :disabled="type == 3 || type == 2" v-model="FormData.processingMethod">
                  <el-radio-button :label="2">退款</el-radio-button>
                  <el-radio-button :label="1"> 换货</el-radio-button>
                  <el-radio-button :label="3">补发</el-radio-button>
                  <!-- <el-radio-button :label="4">买家拒收</el-radio-button> -->
                </el-radio-group>
              </div>
              <el-button type="text" :disabled="type == 3 || type == 2" @click="RejectApplication">驳回申请</el-button>
            </div>
            <div style="padding: 20px 0px">
              <ApprovalRefund
                :curentData="FormData"
                :type="type"
                v-show="FormData.processingMethod == '2'"
                @relaod="getOrderQuestionApplyDetailsFun"
              >
              </ApprovalRefund>
              <ApprovalExchange
                :curentData="FormData"
                :type="type"
                v-show="FormData.processingMethod == '1'"
                @relaod="getOrderQuestionApplyDetailsFun"
              >
              </ApprovalExchange>
              <ApprovalReissue
                :curentData="FormData"
                :type="type"
                v-show="FormData.processingMethod == '3'"
                @relaod="getOrderQuestionApplyDetailsFun"
              >
              </ApprovalReissue>
            </div>
          </el-card>
          <el-card class="processModeLeft" v-else>
            <div style="display: flex; justify-content: space-between">
              <div>
                <strong>处理方式：</strong>
                <el-radio-group size="mini" v-model="active">
                  <el-radio-button :label="1">买家拒收</el-radio-button>
                </el-radio-group>
              </div>
              <el-button type="text" :disabled="type == 3 || type == 2" @click="RejectApplication">驳回申请</el-button>
            </div>
            <div style="padding: 20px 0px">
              <!-- 去掉小数 -->
              <ApprovalRejection :type="type" :curentData="FormData" @relaod="getOrderQuestionApplyDetailsFun">
              </ApprovalRejection>
            </div>
          </el-card>
          <!-- →_→订单备注 -->
          <el-card class="processModeRight">
            <el-col :span="24">
              <el-row style="margin-bottom: 4px"> {{ $t('备注（必填）') }}: </el-row>
              <el-row style="margin-bottom: 10px">
                <el-input type="textarea" :disabled="type == 3" v-model="FormData.remark" :rows="10"></el-input>
              </el-row>
            </el-col>
          </el-card>
        </div>
        <div v-else>
          <el-card class="processModeLeft">
            <div style="font-size: 16px">驳回原因：{{ FormData.rejectRemark }}</div>
          </el-card>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button
          :disabled="type == 3"
          type="primary"
          @click="refundSubmitFun"
          v-show="FormData.status == '1' && type == '1'"
          v-hasPermi="['distribution:orderQuestionApply:refundSubmit']"
          >{{ $t('提交') }}</el-button
        >
        <el-button
          :disabled="type == 3"
          v-hasPermi="['distribution:orderQuestionApply:refundSubmit']"
          @click="refundSubmitFun"
          v-show="(FormData.status == '2' && type != '2') || (FormData.status == '2' && type == 1)"
          type="primary"
          >{{ $t('修改') }}</el-button
        >
        <el-button
          :disabled="type == 3"
          v-show="(type == '2' && FormData.processingMethod == 2) || (type == '2' && FormData.processingMethod == 4)"
          type="primary"
          @click="CompleteAcceptance"
          v-hasPermi="['distribution:orderQuestionApply:completeHandle']"
          >{{ $t('处理完成') }}</el-button
        >
        <el-button
          :disabled="type == 3"
          v-show="
            (type == '2' && FormData.processingMethod == '1') || (type == '2' && FormData.processingMethod == '3')
          "
          type="primary"
          @click="refundSubmitFun"
          >{{ $t('扫码出库') }}</el-button
        >
        <el-button @click="cancel">{{ $t('取消') }}</el-button>
      </div>
      <!-- 订单数量 -->
      <OrderNum :show.sync="OrderNumShow" :query="packageInfo" />
    </el-dialog>
    <el-dialog
      :before-close="beforeClosePackageDetails"
      :visible.sync="PackageDetails"
      title="订单详情"
      fullscreen
      destroy-on-close
      modal
      :close-on-click-modal="false"
    >
      <hr />
      <div class="headerPrint">
        <div></div>
        <div>
          <el-button
            @click="handlePrintOrderPackageCache"
            v-hasPermi="['distribution:orderPackage:printOrderPackageCache']"
          >
            打印剩余库位数量
          </el-button>
        </div>
        <div>
          <!-- <el-button
          type=""
          v-if="baseDataForm.deliveryTypeFinal == 1"
          v-print="printContent"
          v-hasPermi="['distribution:orderPackage:poPackagePrint']">
          打印邮局面单
        </el-button> -->
        </div>
      </div>
      <div class="articleModal">
        <el-card shadow="never">
          <el-card class="leftContent" shadow="never">
            <div>订单号：{{ baseDataForm.orderNo }}</div>
            <div>收货人名称：{{ baseDataForm.shoppingName }}</div>
            <div>收货人电话：{{ baseDataForm.shoppingPhone }}</div>
            <div>收货人邮编：{{ baseDataForm.shoppingPostCode }}</div>
            <div>收货地址：{{ baseDataForm.shoppingAddress }}</div>
            <div>运输方式：{{ baseDataForm.deliveryWayFinal }}</div>

            <div>
              运输类型：
              <span v-if="baseDataForm.deliveryTypeFinal == 1"> 邮局</span>
              <span v-if="baseDataForm.deliveryTypeFinal == 2"> 黑猫</span>
              <span v-if="baseDataForm.deliveryTypeFinal == 3"> 佐川</span>
            </div>
            <div>订单份数：{{ baseDataForm.packageNum }}</div>
          </el-card>
          <!-- <el-card class="leftContent" shadow="never">
            出库情况：
            <span v-if="baseDataForm.outStatus == 0" style="color: red">未出库</span>
            <span v-if="baseDataForm.outStatus == 1" style="color: #13ce66">已出库</span>
          </el-card> -->
          <!-- <el-card class="leftContent" shadow="never">
            <div>注文番号：</div>
            <div class="annotated" style="height: 200px">
              <div v-for="(item, indexx) in baseDataForm.orderList">
                {{ item.orderNo }}
              </div>
            </div>
          </el-card> -->
        </el-card>

        <el-card class="centerContent" shadow="never">
          <el-table :height="calTableHeight()" ref="TableRef" :data="baseDataForm.orderSkuReissueList">
            <el-table-column :label="$t('库位号')" align="center" prop="positionNo" width="110"></el-table-column>
            <el-table-column :label="$t('图片')" align="center">
              <template slot-scope="{ row }">
                <el-image
                  style="width: 35px; height: 35px"
                  lazy
                  :src="row.imgUrl + '?x-oss-process=image/resize,w_100/quality,q_70'"
                />
              </template>
            </el-table-column>
            <el-table-column :label="$t('sku编号')" align="center" prop="skuNo" width="110"></el-table-column>
            <el-table-column label="出库数量" align="center" prop="num"></el-table-column>
            <el-table-column label="确认数量" align="center" prop="nums"></el-table-column>
            <el-table-column label="箱规/整箱" align="center" prop="box">
              <template slot-scope="{ row }">
                <span>{{ row.box }} &emsp;/ &emsp;{{ Math.floor(row.num / row.box) }}</span>
              </template>
            </el-table-column>
          </el-table>
          <el-card shadow="never">
            <div style="display: flex; justify-content: space-around">
              <span> 出库总数量:{{ baseDataForm.outTotalNum }}</span>
              <span> 序列号数量:{{ ParcelList.length }}</span>
            </div>
          </el-card>
        </el-card>
        <el-card class="rightContent" v-if="baseDataForm.outStatus !== 1" shadow="never">
          <div style="margin: 10px">
            <span>扫码确认：</span
            ><el-input clearable @change="changeScancode" style="width: 200px" v-model="formData.ser"></el-input>
          </div>
          <el-table ref="TableRef" :data="ParcelList" height="650px">
            <el-table-column label="条形码" width="170" align="center" prop="id"></el-table-column>
            <el-table-column :label="$t('库位号')" align="center" prop="spNo"></el-table-column>
            <el-table-column label="出库情况" align="center" prop="id">
              <template slot-scope="{ row }">
                <span v-if="row.status == 0">未出库</span>
                <span v-if="row.status == 1" style="color: red">已出库</span>
                <span v-if="row.status == 2" style="color: red">不在此包裹里</span>
                <span v-if="row.status == 3" style="color: red">未上架</span>
                <span v-if="row.status == 4" style="color: red">临期问题</span>
                <span v-if="row.status == 5" style="color: red">过期问题</span>
              </template>
            </el-table-column>
            <el-table-column :label="$t('过期时间')" align="center" prop="expiredTime"></el-table-column>
            <el-table-column :label="$t('操作')" align="center">
              <template slot-scope="scope">
                <el-popconfirm
                  @confirm="clickDelete(scope.row, scope.$index)"
                  confirm-button-text="确定"
                  cancel-button-text="取消"
                  icon="el-icon-info"
                  icon-color="red"
                  title="确定删除吗？"
                >
                  <el-link type="danger" slot="reference">删除</el-link>
                </el-popconfirm>
                <el-popconfirm
                  v-if="scope.row.isOutbound == 0 && scope.row.status == 4"
                  @confirm="outboundDelivery(scope.row)"
                  confirm-button-text="确定"
                  cancel-button-text="取消"
                  icon="el-icon-info"
                  icon-color="red"
                  title="确定出库?"
                >
                  <el-link type="danger" slot="reference">确定出库</el-link>
                </el-popconfirm>
                <div v-if="scope.row.isOutbound == 1">已确认</div>
              </template>
            </el-table-column>
          </el-table>
          <el-button
            class="submitBtn"
            type="primary"
            v-hasPermi="['distribution:orderQuestionApply:completeHandle']"
            @click="submitList"
            >完成处理</el-button
          >
        </el-card>
        <el-card shadow="never" class="select" v-if="baseDataForm.outStatus !== 1">
          <div style="margin-bottom: 10px; display: flex; justify-content: space-between">
            <div>包装耗材选择:</div>
            <div><el-checkbox v-model="skuConsumableRecommendFlag">是否记录</el-checkbox></div>
          </div>
          <div class="add-item" v-for="(item, index) in selectedPackagingsArr">
            <div>
              {{ item.cesName }}
            </div>
            <i @click="selectedPackagingsArr.splice(index, 1)" class="el-icon-close close-icon"></i>
          </div>
          <div class="add-btn" @click="handleOpenSelectedPackagings">
            <i class="el-icon-plus"></i>
          </div>
        </el-card>
      </div>
    </el-dialog>
    <el-dialog
      title="包装耗材选择"
      :visible.sync="selectedPackagings.show"
      :width="isMobile ? '90%' : '600px'"
      destroy-on-close
      :modal="true"
      :close-on-click-modal="false"
    >
      <el-select multiple v-model="selectedPackagings.selectArr" :style="{ width: '85%' }" clearable>
        <el-option
          :disabled="handleElOptionDisabled(item)"
          :label="item.cesName"
          :value="item.id"
          v-for="item in selectedPackagings.list"
          :key="item.id"
        >
          <div style="display: flex; align-items: center">
            <el-image
              style="width: 30px; height: 30px; margin-right: 5px"
              fit="contain"
              :src="item.cesImg + '?x-oss-process=image/resize,w_100/quality,q_70'"
            />
            <div>{{ item.cesName }}</div>
          </div>
        </el-option>
      </el-select>
      <span slot="footer" class="dialog-footer">
        <el-button @click="selectedPackagings.show = false">取 消</el-button>
        <el-button type="primary" @click="handleSelectedPackagings">确 定</el-button>
      </span>
    </el-dialog>
    <!-- <showExpressSheet ref="showExpressSheetref" :packageNo="baseDataForm.packageNo" v-if="PackageDetails" /> -->
    <PrintSpNoLeftNumber :show.sync="printSpNoLeftNumber.show" :formData="printSpNoLeftNumber.formData" />
  </div>
</template>

<script>
import { listNoPageByOrder } from '@/api/distribution/sku/packingInformation'
import { printOrderPackageCache } from '@/api/distribution/sku/ScanCodeOutOfStorage'
import {
  checkAgainWarehouse,
  completeHandle,
  confirmOrderQuestionApplyBarterStep1,
  createSkuSerializableList,
  getOrderQuestionApplyBarterStep1Info,
  getOrderQuestionApplyDetails,
  getOrderQuestionApplyDetailsByReject,
  refundSubmit,
  rejectOrderQuestionApply,
  rejectSubmit,
} from '@/api/orderManage/orderIssuesApplyList'
import Print from 'vue-print-nb'
import ApprovalExchange from './ApprovalExchange.vue'
import ApprovalRefund from './ApprovalRefund.vue'
import ApprovalReissue from './ApprovalReissue.vue'
import ApprovalRejection from './ApprovalRejection.vue'
import OrderNum from './orderNum.vue'
import showExpressSheet from './showExpressSheet.vue'
import PrintSpNoLeftNumber from '@/views/distribution/sku/ScanCodeOutOfStorage/components/printSpNoLeftNumber.vue'

export default {
  components: {
    showExpressSheet,
    ApprovalRefund,
    ApprovalExchange,
    ApprovalReissue,
    ApprovalRejection,
    OrderNum,
    PrintSpNoLeftNumber,
  },
  props: {
    /**问题订单详细数据 */
    listData: {},
    /**控制审核显示 */
    show: {
      type: Boolean,
      default: false,
    },
    /**审批类型(1:首次审核，2审批通过，3详情) */
    type: {
      type: String,
      default: '1',
    },
  },
  directives: {
    Print,
  },
  data() {
    return {
      printSpNoLeftNumber: {
        show: false,
        formData: {},
      },
      active: 1,
      /**耗材是否记录: 0：不记录 1：记录 */
      skuConsumableRecommendFlag: false,
      /**选定的包装 */
      selectedPackagingsArr: [],
      selectedPackagings: {
        show: false,
        selectArr: [],
        list: [],
      },
      showExpressSheetData: {
        show: false,
        packageNo: '',
      },
      printContent: {
        id: 'printTests',
        preview: false, // 预览工具是否启用
        previewTitle: '面单', // 预览页面的标题
        popTitle: '面单', // 打印页面的页眉
        previewBeforeOpenCallback() {},
        previewOpenCallback() {},
        beforeOpenCallback(vue) {
          vue.printLoading = true
        },
        openCallback(vue) {
          vue.printLoading = false
        },
        closeCallback(vue) {
          console.log('预览页面关闭')
          // vue.handleFocus('inputRef2')
        },
        clickMounted(vue) {
          console.log('预览页面开启')
        },
      },
      formData: {
        input: '',
        id: '',
      },
      ParcelList: [],
      /**包裹详情 */
      baseDataForm: {},
      PackageDetails: false,
      packageInfo: {},
      OrderNumShow: false,
      FormData: {
        returnProductSituation: '', //返品情况
        sellerSkuFee: '', //sku费用是否退还
        sellerFreightBaleFee: '', //运费捆包是否退还
        undertakeFreightBaleFee: '', //运费捆包退还的承担者
        isHandlingFeeReturn: '', //手续费是否返还
        isWarehouse: '', //是否入库

        processingMethod: 0, //订单处理方式
        handlingFeeReturn: '', //手续费
        packageOtherOrderNoList: [], //订单列表
        remark: '', //备注
        freightFee: 0, //运费
        baleFee: 0, //捆包费
        undertakeDistrId: '', //选择供应商时需要传这个id
        orderSkuReturnFeeList: [], //退费sku列表
        orderSkuReissueList: [], //换货列表

        orderSkuApplyList: [], //入库sku列表
      },
    }
  },

  computed: {
    /**包装耗材选择是否能选择 */
    canSelect() {},

    isMobile() {
      const userAgent = navigator.userAgent.toLowerCase()
      const mobileAgents = ['android', 'webos', 'iphone', 'ipad', 'blackberry', 'windows phone']
      const isTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0
      const windowWidth = window.innerWidth || document.documentElement.clientWidth
      const windowHeight = window.innerHeight || document.documentElement.clientHeight

      for (let i = 0; i < mobileAgents.length; i++) {
        if (userAgent.includes(mobileAgents[i])) {
          return true
        }
      }

      if (isTouch) {
        return true
      }

      if (windowWidth < 768 && windowHeight < 1024) {
        return true
      }

      return false
    },
  },
  methods: {
    handlePrintOrderPackageCache() {
      const data = {
        packageNo: this.baseDataForm.packageNo,
        serList: this.ParcelList,
      }
      printOrderPackageCache(data).then((res) => {
        this.printSpNoLeftNumber.formData = res.data
        this.printSpNoLeftNumber.show = true
      })
    },
    handleElOptionDisabled(item) {
      const index = this.selectedPackagingsArr.findIndex((i) => i.id == 0)
      return index > -1
    },
    handleOpenSelectedPackagings() {
      this.selectedPackagings.selectArr = []
      listNoPageByOrder().then((res) => {
        this.selectedPackagings.list = res.data
        this.selectedPackagings.list.unshift({
          cesName: this.$t('无耗材'),
          id: 0,
        })
        this.selectedPackagings.show = true
      })
    },
    handleSelectedPackagings() {
      // 判断是否选择 "无耗材"
      let isSelectNo = false
      this.selectedPackagings.selectArr.map((id) => {
        if (id == 0) {
          isSelectNo = true
        }
        const index = this.selectedPackagingsArr.findIndex((i) => i.id == id)
        if (index == -1) {
          const item = this.selectedPackagings.list.filter((i) => i.id == id)
          this.selectedPackagingsArr.push(item[0])
        }
      })
      // 判断是否选择 "无耗材"
      if (isSelectNo) {
        this.selectedPackagingsArr = [
          {
            cesName: this.$t('无耗材'),
            id: 0,
          },
        ]
      }
      // this.handleFocus('packageSubmit')

      this.skuConsumableRecommendFlag = true
      this.selectedPackagings.show = false
    },
    /**下载面单 */
    print() {
      // this.showExpressSheetData.show = true
      // console.log(this.$refs, '--------')
      // this.$refs.showExpressSheetref.getData()
    },
    /**删除条形码 */
    clickDelete(row, index) {
      this.ParcelList.splice(index, 1)
      this.mathStorageLocation()
      this.$message.success('操作成功')
    },
    /**确认出库 */
    outboundDelivery(row) {
      this.ParcelList.forEach((item) => {
        if (item.id == row.id) {
          item.isOutbound = 1
        }
      })
    },
    /**计算库位号对应数量 */
    mathStorageLocation() {
      this.baseDataForm.orderSkuReissueList.forEach((item, index) => {
        this.$set(this.baseDataForm.orderSkuReissueList[index], 'nums', 0)
        this.ParcelList.forEach((itemInner, indexs) => {
          if (item.positionNo == itemInner.spNo) {
            item.nums++
          }
        })
      })
      this.$forceUpdate()
      setTimeout(() => {
        console.log(this.baseDataForm.orderSkuReissueList)
      }, 3000)
    },
    /**查询订单 */
    changeScancode() {
      checkAgainWarehouse({
        ser: this.formData.ser,
        applyId: this.FormData.id,
        packageNo: this.FormData.packageNo,
      }).then((res) => {
        this.formData.ser = ''
        res.data.isOutbound = 0
        this.ParcelList.unshift(res.data)
        this.mathStorageLocation()
        this.formData.id = ''
      })
    },
    /**获取包裹基本信息 */
    async getscanPackageNo() {
      await getOrderQuestionApplyBarterStep1Info({
        orderId: this.FormData.orderId,
        orderQuestionApplyId: this.FormData.id,
      }).then((res) => {
        // 2.问题订单扫码出库详情：status 状态为2 审核完成待处理  才获取 skuConsumableVoList 并且 skuConsumableVoList 不为空时
        if (res.data.status == 2 && res.data.skuConsumableList && res.data.skuConsumableList.length > 0) {
          this.selectedPackagingsArr = res.data.skuConsumableList.map((i) => {
            return {
              cesName: i.cesName,
              id: i.id,
            }
          })
        } else {
          this.selectedPackagingsArr = [
            {
              cesName: this.$t('无耗材'),
              id: 0,
            },
          ]
        }
        if (res.code != 500) {
          this.PackageDetails = true
          this.baseDataForm = res.data
          this.baseDataForm.outTotalNum = 0
          this.baseDataForm.orderSkuReissueList.forEach((element, index) => {
            this.baseDataForm.outTotalNum += element.num
          })
        }
        this.mathStorageLocation()
      })
      if (this.PackageDetails && this.baseDataForm.deliveryTypeFinal == 1) {
        this.print()
      }
    },
    /**提交扫码确认列表 */
    submitList(value) {
      let scanIdList = []
      this.ParcelList.forEach((item) => {
        scanIdList.push({
          ser: item.id,
          status: item.status,
          isOutbound: item.isOutbound,
        })
      })
      const cesIdList = this.selectedPackagingsArr.map((i) => i.id)?.filter((item) => item != 0)
      const data = {
        id: this.listData.id,
        scanIdList,
        cesIdList,
        /**耗材是否记录: 0：不记录 1：记录 */
        skuConsumableRecommendFlag: this.skuConsumableRecommendFlag ? 1 : 0,
      }

      completeHandle(data).then((res) => {
        this.$message({ type: 'success', message: res.msg })
        this.PackageDetails = false
        this.cancel()
      })
    },
    /**关闭定单 */
    beforeClosePackageDetails() {
      ;(this.formData = {
        input: '',
        id: '',
      }),
        (this.ParcelList = [])
      this.PackageDetails = false
    },
    /**订单详情 */
    orderInfor(row) {
      this.packageInfo = {
        orderBatchId: this.FormData.orderBatchId,
        orderNo: row.orderNo,
        platform: row.platform,
        packageNo: this.FormData.packageNo,
      }
      this.OrderNumShow = !this.OrderNumShow
    },
    /**驳回申请 */
    RejectApplication() {
      this.$prompt('请输入驳回原因', '驳回', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^\s*\S+[\s\S]*$/,
        inputErrorMessage: '请填写驳回原因',
      }).then(({ value }) => {
        rejectOrderQuestionApply({ id: this.FormData.id, rejectRemark: value }).then((res) => {
          this.$message({
            type: 'success',
            message: '已驳回: ',
          })
          this.getOrderQuestionApplyDetailsFun()
        })
      })
    },
    /**受理完成 */
    CompleteAcceptance() {
      let submitflage = true
      if (this.FormData.remark == '' || this.FormData.remark == null) {
        this.$notify.error({
          title: '错误',
          message: '请填写备注',
        })
        submitflage = false
      }
      if (submitflage) {
        completeHandle({ id: this.listData.id }).then((res) => {
          this.$message({
            type: 'success',
            message: res.msg,
          })
          this.cancel()
        })
      }
    },
    /**分配序列号 */
    allocationSequence(row) {
      createSkuSerializableList([row]).then((res) => {
        row.DsSkuSerializableDTO = res.data
      })
    },
    /**提交前非表单数据校验提示----退款时校验 */
    rulerFormData() {
      let submitflage = true
      if (this.FormData.remark == '' || this.FormData.remark == null) {
        this.$notify.error({
          title: '错误',
          message: '请填写备注',
        })
        submitflage = false
      }
      /**后端约定在退款类型提交时置空包裹数量 */
      this.FormData.packageNum = ''
      /**指针循环去掉申请深拷贝sku费用id */
      this.FormData.orderSkuReturnFeeList.forEach((item, index) => {
        this.FormData.orderSkuApplyList.forEach((innerItem) => {
          if (item.skuNo == innerItem.skuNo) {
            this.FormData.orderSkuReturnFeeList[index].orderQuestionSkuId = innerItem.id
          }
        })

        this.FormData.orderSkuReturnFeeList[index] = {
          undertakeDistrType: item.undertakeDistrType,
          applyPrice: item.applyPrice,
          skuNo: item.skuNo,
          distrId: item.distrId,
          orderQuestionApplyId: item.orderQuestionApplyId,
          orderQuestionSkuId: item.orderQuestionSkuId ? item.orderQuestionSkuId : '',
          num: item.num,
        }
      })
      /**验证当为与非退还时，并且供应商承担时，必须要选择供应商 */
      if (this.FormData.undertakeFreightBaleFee == 2 && !this.FormData.undertakeDistrId) {
        submitflage = false
        this.$message({
          type: 'error',
          message: '请选择供应商',
        })
      }
      /**验证当为选择入库产品时，必须有产品入库 */
      if (this.FormData.returnProductSituation == 3 && this.FormData.orderSkuApplyList.length < 1) {
        submitflage = false
        this.$notify.error({
          title: '错误',
          message: '请选择入库产品',
        })
      }
      return submitflage
    },
    /**换货验证 */
    rulerFormDataChange() {
      let submitflage = true
      if (this.FormData.remark == '' || this.FormData.remark == null) {
        this.$notify.error({
          title: '错误',
          message: '请填写备注',
        })
        submitflage = false
      }
      return submitflage
    },
    /**提交审核 */
    refundSubmitFun() {
      if (
        (this.FormData.processingMethod == 1 && this.rulerFormDataChange()) ||
        (this.FormData.processingMethod == 3 && this.rulerFormDataChange())
      ) {
        if (this.FormData.processingMethod == 1) {
          this.FormData.type = '1'
        }
        if (this.FormData.processingMethod == 3) {
          this.FormData.type = '2'
        }
        confirmOrderQuestionApplyBarterStep1(this.FormData).then((res) => {
          if (this.type == 2) {
            this.getscanPackageNo()
          } else {
            this.$message({
              type: 'success',
              message: '操作成功',
            })
            this.$forceUpdate()
            this.cancel()
          }
        })
      } else if (this.FormData.processingMethod == 2) {
        if (this.rulerFormData()) {
          refundSubmit(this.FormData).then((res) => {
            this.$message({
              type: 'success',
              message: '操作成功',
            })
            this.$forceUpdate()
            this.cancel()
          })
        }
      } else if (this.FormData.processingMethod == 4) {
        /**买家拒收处理 */
        rejectSubmit(this.FormData).then((res) => {
          this.$message({
            type: 'success',
            message: '操作成功',
          })
          this.$forceUpdate()
          this.cancel()
        })
      }
    },
    cancel() {
      ;(this.FormData = {
        returnProductSituation: '', //返品情况
        sellerSkuFee: '', //sku费用是否退还
        sellerFreightBaleFee: '', //运费捆包是否退还
        undertakeFreightBaleFee: '', //运费捆包退还的承担者
        isHandlingFeeReturn: '', //手续费是否返还
        isWarehouse: '', //是否入库

        processingMethod: 0, //订单处理方式
        handlingFeeReturn: '', //手续费
        packageOtherOrderNoList: [], //订单列表
        remark: '', //备注
        freightFee: 0, //运费
        baleFee: 0, //捆包费
        undertakeDistrId: '', //选择供应商时需要传这个id
        orderSkuReturnFeeList: [], //退费sku列表
        orderSkuReissueList: [], //换货列表

        orderSkuApplyList: [], //入库sku列表
      }),
        this.$emit('update:show', false)
      this.$emit('getList')
    },
    /**查询审核详情||审核类型为processingMethod==4时是包裹详情 */
    getOrderQuestionApplyDetailsFun() {
      if (this.listData.processingMethod == 4) {
        getOrderQuestionApplyDetailsByReject(this.listData.id).then((res) => {
          this.FormData = res.data
        })
      } else {
        getOrderQuestionApplyDetails(this.listData.id).then((res) => {
          this.FormData = res.data
        })
      }
    },
  },
  watch: {
    show: function (newValue) {
      if (newValue) {
        this.getOrderQuestionApplyDetailsFun()
      }
    },
  },
}
</script>
<style scoped lang="scss">
.pritcontent {
  border: solid 2px black;
  border-radius: 4px;
  padding: 20px;
}

.headerPrint {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  margin-bottom: 30px;
}
::v-deep .el-dialog__body {
  padding: 0px 20px 20px 20px;
}
.submitBtn {
  margin: 6px;
  float: right;
}

.articleModal {
  display: flex;
  height: 100%;

  .leftContent {
    // flex: 1.5;
    width: 300px;
    .el-card__body {
      & > div {
        height: 40px;
        width: 100%;
      }
    }
  }

  .centerContent {
    flex: 2.4;
  }

  .rightContent {
    flex: 2.6;
  }
  .select {
    flex: 1;
    // .add-btn{
    //   &:hover{

    //     border:2px solid #85ce61;
    //   }
    // }

    .add-btn,
    .add-item {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px;
      border: 1px solid #ccc;
      margin-top: 5px;
      cursor: pointer;
      .close-icon {
        position: absolute;
        right: 3px;
        top: 3px;
        font-size: 16px;
        &:hover {
          color: red;
          font-weight: bold;
        }
      }
    }
  }
}

.annotated {
  overflow-y: scroll;

  & > div {
    margin-top: 8px;
  }
}
.app-container {
  min-height: calc(100vh - 84px);

  /* 基于视口宽度 */
  @media (max-width: 600px) {
    /* 当视口宽度小于等于 600 像素时应用的样式 */
    .main {
      flex-direction: column;
      height: 100% !important;
    }
    .main-left_bot {
      margin-bottom: 0 !important;
    }

    .articleModal {
      flex-direction: column;
      .leftContent {
        width: 100%;
        .annotated {
          height: auto;
        }
      }
      .centerContent {
        width: 100%;
        margin: 15px 0;
        .el-card__body {
          padding: 0;
        }
      }
      .rightContent {
        width: 100%;
      }
    }

    .el-card__body {
      padding: 5px;
    }

    .detail-dialog {
    }
  }
  .main {
    height: calc(100vh - 124px);
    width: 100%;
    display: flex;
    &-left {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex: 4;
      &_top {
      }
      &_bot {
        margin-bottom: 150px;
        font-size: 17px;
        font-weight: bold;
        line-height: 50px;
      }
    }
    &-right {
      flex: 5;
    }
  }
}
</style>
